<template>
    <div class="cotainer">
        <div style="float: left;width: 200px">
            <el-aside width="200px">
                <!--机构-->
                <template slot-scope="scope">
                    <el-tree
                            :data="treeData"
                            :props="defaultProps"
                            @node-click="handleNodeClick">
                    </el-tree>
                </template>
            </el-aside>
        </div>
        <div style="float: left;">
            <div style="width: 100%">
                <div style="width: 300px;float: left;">
                    <el-input clearable v-model="username" placeholder="用户名"></el-input>
                </div>
                <div style="width: 300px;margin-top: 2px;margin-left: 310px;">
                    <el-input clearable v-model="name" placeholder="姓名"></el-input>
                </div>
                <div style="margin-top: -40px;margin-left: 620px;">
                    <el-button type="primary" @click="inquire">搜索</el-button>
                </div>
                <div style="margin-top: -40px;margin-left: 800px;">
                    <el-button type="success" @click="add">创建用户</el-button>
                </div>
            </div>
            <div style="width: 100%;margin-top: 20px">
                <div>
                    <!-- 用户列表-->
                    <el-table
                            :data="tableData"
                            border
                            style="width: 100%">
                        <el-table-column
                                prop="login_name"
                                label="用户名"
                                align="center"
                                width="150">
                        </el-table-column>
                        <el-table-column
                                prop="name"
                                label="姓名"
                                align="center"
                                width="150">
                        </el-table-column>
                        <el-table-column
                                prop="rolenames"
                                label="角色"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                prop="create_time"
                                label="创建时间"
                                align="center"
                                width="170">
                        </el-table-column>
                        <el-table-column
                                label="操作"
                                align="center"
                                width="200">
                            <template slot-scope="scope">
                                <el-button
                                        type="success"
                                        size="mini"
                                        @click="handleEdit(scope.$index, scope.row)">编辑
                                </el-button>
                                <el-button
                                        type="danger"
                                        size="mini"
                                        @click="handleDelete(scope.$index, scope.row.id)">删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 分页 -->
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="pageNo"
                            :page-sizes="[10, 20, 50, 100]"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next"
                            :total="totalRecord" class="text-center mt10">
                    </el-pagination>
                </div>
            </div>
        </div>
        <!--添加角色弹出框-->
        <el-dialog title="人员" :visible.sync="addUserVisible" width="650px">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="180px"
                     class="demo-ruleForm">
                <el-form-item label="账号：" prop="login_name">
                    <div style="width: 320px">
                        <el-input v-model="ruleForm.login_name"></el-input>
                    </div>
                </el-form-item>
                <el-form-item label="姓名：" prop="name">
                    <div style="width: 320px">
                        <el-input v-model="ruleForm.name"></el-input>
                    </div>
                </el-form-item>
                <el-form-item label="电话：" prop="mobile">
                    <div style="width: 320px">
                        <el-input v-model="ruleForm.mobile"></el-input>
                    </div>
                </el-form-item>
                <el-form-item label="角色：" prop="role">
                    <el-checkbox-group v-model="addform">
                        <el-checkbox v-for="item in updateroleList" :key=item.role_id
                                     :label=item.role_id>
                            {{item.role_name}}
                        </el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="no">取 消</el-button>
                <el-button type="primary" @click="yes">确 定</el-button>
            </div>
        </el-dialog>
        <!--修改角色弹出框-->
        <el-dialog title="人员" :visible.sync="updateVisible">
            <el-form :model="updateForm" :rules="updaterules" ref="updateForm" label-width="180px"
                     class="demo-ruleForm">
                <el-form-item label="账号：" prop="login_name">
                    <div style="width: 320px">
                        <el-input v-model="updateForm.login_name" readonly></el-input>
                    </div>
                </el-form-item>
                <el-form-item label="姓名：" prop="name">
                    <div style="width: 320px">
                        <el-input v-model="updateForm.name"></el-input>
                    </div>
                </el-form-item>
                <el-form-item label="电话：" prop="mobile">
                    <div style="width: 320px">
                        <el-input v-model="updateForm.mobile"></el-input>
                    </div>
                </el-form-item>
                <el-form-item label="角色：" prop="role">
                    <el-checkbox-group v-model="updateform">
                        <el-checkbox
                                v-for="item in updateroleList"
                                :key=item.role_id
                                :label=item.role_id>
                            {{item.role_name}}
                        </el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="determine">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        data() {
            var checkPhone = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('手机号不能为空'));
                } else {
                    const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
                    if (reg.test(value)) {
                        callback();
                    } else {
                        return callback(new Error('请输入正确的手机号'));
                    }
                }
            };
            return {
                treeData: [],//用户数据
                defaultProps: {
                    children: 'children',
                    label: 'name',
                },
                treeList: [],//机构数据
                rules: {   //验证
                    login_name: [
                        {required: true, message: '请输入账号名称', trigger: 'blur'},
                        // {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                    ],
                    name: [
                        {required: true, message: '请输入姓名', trigger: 'blur'},
                        // {min: 3, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur'}
                    ],
                    mobile: [
                        {validator: checkPhone, trigger: 'blur', required: true}
                    ],
                    role: [
                        {trigger: 'change'}
                    ]

                },
                updaterules: {   //修改时的验证
                    login_name: [
                        {required: true, message: '请输入账号名称', trigger: 'blur'},
                        // {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                    ],
                    name: [
                        {required: true, message: '请输入姓名', trigger: 'blur'},
                        // {min: 3, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur'}
                    ],
                    mobile: [
                        {validator: checkPhone, trigger: 'blur', required: true}
                    ],
                    role: [
                        {trigger: 'change'}
                    ]

                },
                addUserVisible: false,//添加用户弹出框
                updateVisible: false,//修改用户弹出框
                formLabelWidth: '120px',
                addform: [],
                form: {},
                updateform: [],
                ruleForm: {},
                updateForm: {},
                username: '',
                name: '',
                updaterole: '',
                tableData: [],
                updateroleList: [],
                id: '',
                dataid: '',
                jgid: '',
                pageNo: 1,
                pageSize: 10,
                totalRecord: 0,
                totalPage: 0,
            }

        },


        props: {},

        components: {},

        computed: {},

        methods: {
            /*用户添加功能*/
            async add() {
                this.addUserVisible = true
                const roleRes = await this.$http('roleList')
                this.updateroleList = roleRes
            },
            /*初始化用户列表，角色列表*/
            async init() {
                const res1 = await this.$http('mechanism', {});
                this.treeData = this.$util.transData(res1, 'id', 'parent_id', 'children');
                this.jgid = this.treeData[0].id
                const res = await this.$http('userList', {
                    grid_id: this.jgid,
                    pageNo: this.pageNo,
                    pageSize: this.pageSize
                });
                console.log('lllll', res)
                this.tableData = res.results
                this.totalPage = res.totalPage;
                this.totalRecord = res.totalRecord;
            },
            //分页
            async handleSizeChange(val) {
                this.pageSize = val;
                this.init();
            },
            async handleCurrentChange(val) {
                this.pageNo = val;

                this.init();
            },
            /*修改功能*/
            async handleEdit(index, row) {
                const roleRes = await this.$http('roleList')
                this.updateroleList = roleRes
                console.log('row', row)
                this.updateForm = row
                this.id = row.id
                this.updateform = row.rolelist.split(',');
                this.updateVisible = true
            },
            /*点击确定创建用户*/
            async yes() {
                this.addUserVisible = false
                this.updaterole = this.addform.join(',')
                const res = await this.$http('createUser', {
                    login_name: this.ruleForm.login_name,
                    name: this.ruleForm.name,
                    mobile: this.ruleForm.mobile,
                    rolelist: this.updaterole,
                    grid_id: this.dataid
                })
                if (res === 'chenggong') {
                    this.$message({
                        message: '创建成功',
                        type: 'success'
                    });
                    this.init()
                } else {
                    this.$message({
                        message: '创建失败',
                        type: 'error'
                    });
                }
            },
            async no() { //取消添加
                this.ruleForm.login_name = ''
                this.ruleForm.name = ''
                this.ruleForm.mobile = ''
                this.addUserVisible = false
            },
            /*确认修改，点击修改用户*/
            async determine() {
                this.updateVisible = false
                this.updaterole = this.updateform.join(',')
                const res = await this.$http('createUser', {
                    rolelist: this.updaterole,
                    id: this.id,
                    name: this.updateForm.name,
                });
                if (res === 'chenggong') {
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    });
                    this.init()
                } else {
                    this.$message({
                        message: '修改失败',
                        type: 'error'
                    });
                }
            },
            async cancel() {  //取消
                this.updateVisible = false
            },
            /*删除用户*/
            async handleDelete(index, row) {

                this.$confirm('将永久删除该用户, 是否继续?', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    const res = await this.$http('deleteUser', {
                        id: row
                    });
                    this.init();
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            /*查询用户数据*/
            async inquire() {
                const res = await this.$http('userList', {
                    login_name: this.username,
                    name: this.name,
                    grid_id: 1,
                });
                this.tableData = res.results
                this.totalPage = res.totalPage;
                this.totalRecord = res.totalRecord;
            },
            async handleNodeClick(data) {
                console.log('date',data)
                this.dataid = data.id
                const res = await this.$http('userList', {
                    grid_id: data.id,
                });
                //console.log('111111111111',res)
                // const res = await this.$http('userList', {
                //     login_name: this.username,
                //     name: this.name,
                //     grid_id: 1,
                // });
                this.tableData = res.results
                this.totalPage = res.totalPage;
                this.totalRecord = res.totalRecord;
                //this.tableData = res.results
            },
            // /*初始化机构列表*/
            // async getTreeList() {
            //     const res = await this.$http('mechanism', {});
            //     this.treeData = this.$util.transData(res, 'id', 'parent_id', 'children');
            //     this.jgid = this.treeData[0].id
            //
            // },


        },

        watch: {},

        mounted() {
            this.init();
        },

    }
</script>

<style scoped>
    .el-row {
        margin-bottom: 20px;

    }

    .el-col {
        border-radius: 4px;
    }

    .bg-purple-dark {
        background: #99a9bf;
    }

    .bg-purple {
        background: #d3dce6;
    }

    .bg-purple-light {
        background: #e5e9f2;
    }

    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }

    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }

    .cotainer {
        /*border: 1px solid black;*/
        /*background-color: #0f4051;*/
        /*margin-left: -200px;*/
    }

</style>
